import React, { useState } from 'react';
import { Form, Card, Icon, Input, InputNumber } from 'antd';
import { Device } from './DeviceManagement';

interface DeviceSettingProps {
  index: number;
  setting: Device;
  defaultMaxPointsInDynamicGraph: number;
  defaultDetailedPointsCount: number;
  defaultDetailedPointsMoveSteps: number;
  removeDevice: (index: number) => void;
  handleDeviceSettingChange: (index: number, newDevice: Device) => void;
}

const DeviceSetting = (props: DeviceSettingProps) => {
  let [device, setDevice] = useState(props.setting);
  return (
    <Card
      title={device.deviceName}
      extra={<Icon type="close" onClick={() => props.removeDevice(props.index)} />}
    >
      <Form layout="inline">
        <Form.Item
          label="设备名称"
          style={{ width: '100%' }}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          required={true}
        >
          <Input
            placeholder="请输入设备名称"
            value={props.setting.deviceName}
            onChange={(e) => {
              device.deviceName = e.target.value;
              setDevice(device);
              props.handleDeviceSettingChange(props.index, device);
            }}
          />
        </Form.Item>

        <Form.Item
          label="采集卡名称"
          style={{ width: '100%' }}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
        >
          <Input
            placeholder="请输入与该设备关联的采集卡名称，用英文逗号,做分割"
            value={props.setting.dacNames}
            onChange={(e) => {
              if (e.target.value === '') {
                device.dacNames = [];
              } else {
                device.dacNames = e.target.value.split(',');
              }
              setDevice(device);
              props.handleDeviceSettingChange(props.index, device);
            }}
          />
        </Form.Item>

        <Form.Item
          label="查看动态监测时图内最大数据个数"
          style={{ width: '100%' }}
          labelCol={{ span: 12 }}
          wrapperCol={{ span: 12 }}
          required={true}
        >
          <InputNumber
            style={{ width: '100%' }}
            min={1}
            value={props.setting.maxPointsInDynamicGraph}
            onChange={(v) => {
              device.maxPointsInDynamicGraph =
                v === undefined || v === null ? props.defaultMaxPointsInDynamicGraph : v;
              setDevice(device);
              props.handleDeviceSettingChange(props.index, device);
            }}
          />
        </Form.Item>

        <Form.Item
          label="查看数据详情时图内最大数据个数"
          style={{ width: '100%' }}
          labelCol={{ span: 12 }}
          wrapperCol={{ span: 12 }}
          required={true}
        >
          <InputNumber
            style={{ width: '100%' }}
            min={1}
            value={props.setting.detailedPointsCount}
            onChange={(v) => {
              device.detailedPointsCount =
                v === undefined || v === null ? props.defaultDetailedPointsCount : v;
              setDevice(device);
              props.handleDeviceSettingChange(props.index, device);
            }}
          />
        </Form.Item>

        <Form.Item
          label="查看数据详情时每次移动的数据个数"
          style={{ width: '100%' }}
          labelCol={{ span: 12 }}
          wrapperCol={{ span: 12 }}
          required={true}
        >
          <InputNumber
            style={{ width: '100%' }}
            min={1}
            value={props.setting.detailedPointsMoveSteps}
            onChange={(v) => {
              device.detailedPointsMoveSteps =
                v === undefined || v === null ? props.defaultDetailedPointsMoveSteps : v;
              setDevice(device);
              props.handleDeviceSettingChange(props.index, device);
            }}
          />
        </Form.Item>
      </Form>
    </Card>
  );
};

export default DeviceSetting;
